<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>器材管理</title>
    <link rel="stylesheet" href="../../libs/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../font/cangKu/iconfont.css">
    <link rel="stylesheet" href="../../font/iconfont/font_w2o0np88fp/iconfont.css">
    <link rel="stylesheet" href="../../css/cangKuGuanLi/qiCaiGuanLi.css">
    <script src="../../js/jquery-3.1.1.js"></script>
    <script src="../../libs/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <script src="../../js/allData.js"></script>
</head>

<body>
    <div class="container ">
        <div class="header">
            <h4>器材管理</h4>
            <div class="top_box clear">
                <div class="search_box">
                    <div>
                        <label for="">器材分类</label>
                        <select name="" id="">
                            <option value="0">全部</option>
                            <option value="1">维修一部</option>
                            <option value="2">维修二部</option>
                            <option value="3">维修三部</option>
                        </select>
                    </div>

                    <div>
                        <label for="">存放区域</label>
                        <select name="" id="">
                            <option value="0">全部</option>
                            <option value="1">A区</option>
                            <option value="2">B区</option>
                            <option value="3">C区</option>
                            <option value="4">D区</option>
                        </select>
                    </div>

                    <div>
                        <label for="">搜索</label>
                        <input type="text" class="danhao" onfocus="this.placeholder=''"
                            onblur="this.placeholder='输入器材名称或编号'" placeholder="输入器材名称或编号">
                    </div>
                </div>
                <div class="search_btn_box">
                    <button type="button" class="reset"><span class="iconfont icon-reset">重置</span></button>
                    <button type="button" class="chaxun"><span class="iconfont icon-sousuo">查询</span></button>
                </div>
            </div>
        </div>

    </div>


    <table class="table">
        <thead id="thead">
            <tr>
                <th>全选</th>
                <th>器材编号</th>
                <th>器材名称</th>
                <th>器材分类</th>
                <th>规格型号</th>
                <th>单位</th>
                <th>存放区域</th>
                <th>货垃</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tbody">



        </tbody>
    </table>
    <div class="footer">
        <button type="button" class="shanchu"><span class="iconfont icon-shanchu"></span> 删除</button>
    </div>
    <div class="page_box clear">
        <div class="pageNum">
            <span>共<span>10</span>页/ <span>100</span>条数据</span>
            <div class="pageBtn_box clear">
                <div id="preBtn" onclick="prevBtn()">
                    <i class="glyphicon glyphicon-chevron-left"></i>
                </div>
                <div id="pageBox">

                </div>
                <div id="nextBtn" onclick="nextBtn()">
                    <i class="glyphicon glyphicon-chevron-right"></i>
                </div>
            </div>

            <div class="tiaozhuan_box">
                <span>转至</span>
                <input type="text" value="1" id="tiaozhuan">
                <span>页</span>

                <a href="#" onclick="tiaozhuan()">跳转</a>
            </div>
        </div>
    </div>
    <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">提示</h4>
                </div>
                <div class="modal-body">
                    <p>您确定要删除吗该条数据吗？</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="del()">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!-- 提示框 -->

    <div class="tishikuang">
        <i class="glyphicon glyphicon-ok"></i>
        删除成功
    </div>

    <script>

        //1.获取节点
        let maxPage;
        let thePage = 0;
        let fenyeList = guanLiList;

        // 渲染页面
        function showTable(data) {
            $('#tbody').html('');
            $.each(data, (index, item) => {
                $('#tbody').append(`
                    <tr>
                        <td>
             <input type="checkbox">
         </td>
                        <td>${item.bianhao}</td>
                        <td>${item.name}</td>
                        <td>${item.fenlei}</td>
                        <td>${item.xinghao}</td>
                        <td>${item.danwei}</td>
                        <td>${item.quyu}</td>
                        <td>${item.huola}</td>
                        <td>
                            <button class="btn_shuxie">
                                <i class="glyphicon glyphicon-edit"></i>
                            </button>
                            <button class="btn_shanchu del" data-id = '${item.bianhao}' data-item = '${JSON.stringify(item)}'>
                                <i class="glyphicon glyphicon-trash"></i>    
                            </button>
                        </td>
                    </tr>
                `)
            })
        }




        // 根据数据源渲染每一页的数据
        function fenye(data, yema) {
            let qishiye = (yema - 1) * 9;
            let xuanranArr = data.slice(qishiye, qishiye + 9);
            showTable(xuanranArr);

            thePage = yema;

            let num = $('.pageItem').text();
            // console.log(num.length);
            for (let i = 0; i < num.length; i++) {
                $('.pageItem').eq(i).css({
                    backgroundColor: '',
                    color: '#969494'
                })
            }
            $('.pageItem').eq(yema - 1).css({
                backgroundColor: '#6554C0',
                color: '#fff'
            })
        }

        showTable(guanLiList)
        fenye(guanLiList, 1)



        // 根据页码渲染分页按钮
        function xuanranPage(data) {
            maxPage = Math.ceil(data.length / 9);
            $('#pageBox').html('')
            for (let i = 1; i <= maxPage; i++) {
                $('#pageBox').append(`
                    <div class='pageItem'>${i}</div>
                `)
            }
        }
        xuanranPage(guanLiList)
        fenye(guanLiList, 1)

        // 点击按钮，实现页面渲染新数据
        $('#pageBox').on('click', '.pageItem', function () {
            let num = parseInt($(this).text());
            fenye(guanLiList, num)
        })

        // 上一页
        function prevBtn() {
            if (thePage != 1) {
                let page = thePage - 1;
                fenye(guanLiList, page)
            }
        }

        //下一页
        function nextBtn() {
            if (thePage < maxPage) {
                let page = thePage + 1;
                fenye(guanLiList, page)
            }
        }

        // 跳转
        function tiaozhuan() {
            let val = document.getElementById('tiaozhuan').value;
            fenye(guanLiList, val)
        }
        // 删除
        let num = []
        $('#tbody').on('click', '.del', function () {
            var data_item = JSON.parse($(this).attr('data-item'));
            var data_id = $(this).attr('data-id');
            $('#myModal').modal('toggle')
            num.push(data_id)
        })

        function del() {
            let time
            for (let i = 0; i < guanLiList.length; i++) {
                if (guanLiList[i].bianhao == num[0]) {
                    guanLiList.splice(i, 1);
                    num = [];
                    time = setInterval(() => {
                        $('.tishikuang').css({
                            position: 'absolute',
                            top: (size[0] - 100) / 2 + 'px',
                            left: (size[1] - 300) / 2 + 'px',
                            display: 'block'
                        })
                    }, 500);
                    break;
                }
            }
            $('#myModal').modal('hide')
            xuanranPage(guanLiList);
            fenye(guanLiList, thePage);
            setTimeout(() => {
                clearInterval(
                    time
                )
                $('.tishikuang').css({
                    display: 'none'
                })
            }, 1500);
        }

        // 查找
        let data
        $('.chaxun').click(function () {
            let startTime = $('.startTime').val();
            let endTime = $('.endTime').val();
            let bianhao = $('.bianhao').val();

            for (let i = 0; i < fenyeList.length; i++) {

                console.log(fenyeList[i].startTime);

            }

        })

        // 重置
        $('.chongzhi').click(function () {
            fenyeList = guanLiList
            show(1)
        })

        show(1)

        function show(num) {
            xuanranPage(fenyeList);
            fenye(fenyeList, 1)
        }
  // 提示框
            let size = []

            function tishi() {
                let tishikuang = document.getElementsByClassName('tishikuang');
                let top = document.body.clientHeight
                let left = document.body.clientWidth
                size.push(top, left);
            }
            tishi()
            // console.log(size);
            $('.tishikuang').css({
                position: 'absolute',
                top: (size[0] - 100) / 2 + 'px',
                left: (size[1] - 100) / 2 + 'px',
                display: 'none'
            })


    </script>


</body>

</html>